﻿<!doctype html>
<html>
    <head>
        <title>jqPlot Tests</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="/js/plots/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.logAxisRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.dateAxisRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="/js/plots/plugins/jqplot.barRenderer.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/js/plots/jquery.jqplot.min.css" />

        <script>
    $(document).ready(function () {
        //var data = [['3/10/2012 3:00AM', 42], ['3/10/2012 3:15AM', 56], ['3/10/2012 3:30AM', 39], ['3/10/2012 3:45AM', 81]];
        var data = [['2012-03-10 8:00AM', 4], ['2012-03-10 8:15AM', 6.5], ['2012-03-10 8:30AM', 5.7], ['2012-03-10 8:45AM', 9], ['2012-03-10 9:00AM', 8.2]];
        //var data = [[0, 42], [15, 56], [30, 39], [45, 81]];

        var plot = $.jqplot('chart', [data], {
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    label: 'Server Time (UTC)',
                    min: '2012-03-10 8:00AM',
                    max: '2012-03-10 9:00AM',
                    tickOptions: {
                        formatString: '%H:%M'
                    },
                    tickInterval: '15 minutes'
                },
                yaxis: {
                    label: 'Connected Players',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            }
        });
    });
        </script>
    </head>
    <body>
        <div style="width: 500px; height: 200px;" id="chart"></div>
        <div style="width: 500px; height: 200px;" id="speed"></div>
    </body>
</html>